<template>
	<view>
		<u--input
			v-if="disabled || !writable"
		  :prefixIcon="'clock'"
			border="bottom"
			disabled
			v-model="val"
		></u--input>
		
		<view @tap="show = true" v-else class="time-view">
			<view :class="val ? 'inherit' : 'prs'">{{ val || placeholder }}</view>
			<view>
				<!-- <image v-show="clearable && val" style="width: 36rpx;height: 36rpx;" src="../static/img/close.png"></image> -->
				<u-icon
				  v-show="clearable && val"
				  name="close-circle-fill"
				  size="20"
				  color="#c0c4cc"
				  @click.native.stop="clearData"
				></u-icon>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view v-show="required && validator" class="requiredMessage">{{ requiredMessage }}</view>
		
		<u-picker 
			:show="show"
			:visibleItemCount="5"
			:defaultIndex="defaultIndex" 
			:columns="[columns]" 
			:keyName="columns.every(item => item[defaultProps.label] == undefined) ? defaultProps.value : defaultProps.label"
			@cancel="show = false"
			@confirm="pickerConfirm"
		></u-picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			val: '',
			show: false,
			defaultIndex: [0],
			validator: false
		};
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		writable: {
			type: Boolean,
			default: true
		},
		defaultProps: {
			type: Object,
			default: () => ({ label: 'label', value: 'value' })
		},
		columns: {
			type: Array,
			default: () => ([{ label: '', value: '' }])
		},
		required: {
			type: Boolean,
			default: false
		},
		requiredMessage: {
			type: String,
			default: '必填!'
		},
		placeholder: {
			type: String,
			default: '请选择内容'
		},
		clearable: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		validateStatus() {
			return this.$store?.state?.validate?.status || false
		}
	},
	watch:{
		value: {
			handler () {
				for(let i = 0; i < this.columns.length; i++) {
					if(this.columns[i][this.defaultProps.value] == this.value) {
						this.defaultIndex = [i]
						this.val = this.columns[i][this.defaultProps.label] ?? this.columns[i][this.defaultProps.value]
						break
					}
				}
			},
			immediate: true,
			deep: true
		},
		validateStatus() {
			if(this.validateStatus && this.required) {
				if(!this.val) {
					this.validator = true
				} else {
					this.validator = false
				}
			}
		},
		val() {
			if(this.validateStatus && this.required) {
				if(!this.val) {
					this.validator = true
				} else {
					this.validator = false
				}
			}
		}
	},
	methods:{
		// 确定选择
		pickerConfirm(e) {
			this.val = e.value[0][this.defaultProps.label] ?? e.value[0][this.defaultProps.value]
			this.$emit('input', e.value[0][this.defaultProps.value])
			this.$emit('pickerChange', e.value[0])
			this.show = false
		},
		// 清除数据
		clearData() {
			if(!this.clearable || !this.val) {
				return
			}
			this.val = ''
			this.$emit('input', '')
		}
	}
}
</script>

<style scoped>
.requiredMessage {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	color: #f56c6c;
	font-size: 22rpx;
}
.time-view {
	width: 100%;
	height: 60rpx;
	border-bottom: 1px solid #dadbde;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5rpx;
	box-sizing: border-box;
}
.time-view view {
	font-size: 28rpx;
}
.time-view view:nth-of-type(2) {
	display: flex;
	align-items: center;
}
.inherit {
	color: inherit;
}
.prs {
	color: rgb(192, 196, 204);
}
</style>